<template>
    <div class="allocation-view">

        <div v-if="ifHave" style="display: flex;justify-content: flex-start;margin-bottom: 10px">
            <el-link :underline="false" style="display: flex;align-items: center" type="primary" @click="onClick">查看历史分配信息
            </el-link>
        </div>

        <div>
            <el-form class="form-detail" label-position="right" label-width="100px">
                <el-row :gutter="20" style="width:100%">

                    <el-col :span="8">
                        <el-form-item label="分配人：">
                            <div>{{creatorName}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="分配时间：">
                            {{dateFormat('yyyy-mm-dd',createdAt)}}
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

            <el-collapse accordion>
                <el-collapse-item v-for="(item,index) in list" :name='index' :key="index">
                    <template #title>
                        <div>
                            <span>分配跟进职员:</span>
                            <span>{{item.headName}}</span>

                        </div>
                        <div style="color: #F3993A; display: flex; align-items: center;margin-left: 50px">
                            <template v-if="item.ifAccept > 0">
                                <el-icon style="margin-right: 10px"><circle-check /></el-icon>
                                <span>已确认</span>
                            </template>
                            <template v-else>
                                <el-icon style="margin-right: 10px"><circle-close /></el-icon>
                                <span>未确认</span>
                            </template>


                        </div>
                    </template>

                    <template v-if="item.allocationAgentDetails && item.allocationAgentDetails.length">
                        <el-table header-cell-class-name="table-header" :data="item.allocationAgentDetails" border v-if="datas.saleTask.taskType == 1 || datas.saleTask.taskType == 2">
                            <el-table-column type="index" label="序号" width="55"/>
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="left"
                                    header-align="center"
                                    label="代理名称"
                                    prop="agentName"
                            />
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="left"
                                    header-align="center"
                                    label="所在地区"
                            >
                                <template #default="{row}">
                                    <span v-if="row.agentType == 'agent'">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
                                    <span v-else>{{ row.address }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="center"
                                    header-align="center"
                                    label="代理商状态"
                            >
                                <template #default="{row}">
                                    <!--        <span v-if="row.tradeStatus == 1">正式代理商</span>-->
                                    <!--        <span v-else>准代理商</span>-->
                                    <span v-if="row.agentType == 'agent'">{{ getLabel('agent_status', row?.agentStatus) }}</span>
                                    <span v-else>{{ getLabel('agent_status_person', row?.agentStatus) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="center"
                                    header-align="center"
                                    label="开发跟进期限"
                            >
                                <template #default="{row}">
                                    {{ dateFormat('yyyy-mm-dd', row.dealTime) }}
                                </template>
                            </el-table-column>

                        </el-table>

                        <el-table v-else-if="datas.saleTask.taskType == 4" :data="item.allocationAgentDetails" header-cell-class-name="table-header" border size="medium">
                            <el-table-column type="index" label="序号" width="55"/>
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="left"
                                    header-align="center"
                                    label="商销客户名称"
                                    prop="sellerName"
                            />
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="left"
                                    header-align="center"
                                    label="所在地区"
                            >
                                <template #default="{row}">
                                    <span>{{ row.selProvinceName }}/{{ row.selCityName }}/{{ row.selAreaName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="center"
                                    header-align="center"
                                    label="客户状态"
                            >
                                <template #default="{row}">
                                    {{ getLabel('seller_status', row.sellerStatus) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    :show-overflow-tooltip="true"
                                    align="center"
                                    header-align="center"
                                    label="开发跟进期限"
                            >
                                <template #default="{row}">
                                    {{ dateFormat('yyyy-mm-dd', row.dealTime) }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <template v-else>
                        <span class="gray-text" v-if="datas.saleTask.taskType == 1 || datas.saleTask.taskType == 2">未指向意向代理信息</span>
                        <span class="gray-text" v-else-if="datas.saleTask.taskType == 4">未分配意向商销客户</span>
                    </template>

                </el-collapse-item>
            </el-collapse>

        </div>
    </div>
</template>

<script>
    import { CircleCheck, CircleClose } from '@element-plus/icons'
    import { defineComponent, reactive, toRefs, watch} from 'vue'
    export default defineComponent({
        name: "allocationView",
        components:{CircleCheck,CircleClose},
        props:{
            datas:{
                type:Object,
                default:{
                    saleTask:{}
                }
            }
        },
        setup(props){
            var data = reactive({
                ifHave:true,
                listData:[],
                list:[],
                creatorName:'',
                createdAt:''
            })

            watch(
                () => props.datas,
                (newV, oldV) => {
                    console.log(newV.allocation)
                    data.ifHave = newV.isHave
                    if (newV.allocation && newV.allocation.length){
                        data.creatorName = newV.allocation[0].creatorName
                        data.createdAt = newV.allocation[0].createdAt

                        let obj = {}
                        data.list = newV.allocation
                    }
                },{deep:true,immediate:true}
            )

            const onClick = () => {

            }

            const getState = (stauts) => {

            }

            return{
                ...toRefs(data),

                onClick,
                getState,
            }
        }
    })
</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .gray-text{
        color:$font-color-info
    }
</style>
